//====== 获取数据方法=====
// 1. 获取学生数据

async function getStudents() {
    try {
        return await axios({ url: '/students' })
    } catch (error) {
        pxmu.fail(error.response.data.message || '获取学生列表数据失败，请检查网络请求')
    }
}

// 2. 获取省
async function getProvinceList() {
    try {
        let { list } = await axios({ url: '/api/province' })
        return list
    } catch (error) {
        pxmu.fail(error.response.data.message || '获取省失败，请检查网络请求')
    }
}

// 3. 获取市
async function getCityList(pname) {
    try {
        let { list } = await axios({ url: '/api/city?pname=' + pname })
        return list
    } catch (error) {
        pxmu.fail(error.response.data.message || '获取市失败，请检查网络请求')
    }
}

// 3. 获取区
async function getAreaList(pname, cname) {
    try {
        let { list } = await axios({ url: `/api/area?pname=${pname}&cname=${cname}` })
        return list

    } catch (error) {
        pxmu.fail(error.response.data.message || '获取区失败，请检查网络请求')
    }
}

// =====渲染页面======
// 1. 渲染学生信息列表
async function renderStudentsList() {
    let res = await getStudents()
    const html = res.data.map(v => {
        const { name, age, gender, group, hope_salary, salary, province, city, area, id } = v
        return `
        <tr>
            <td>${name}</td>
    
            <td>${age}</td>
    
            <td>${gender === 0 ? '男' : '女'}</td>
    
            <td>第${group}组</td>
    
            <td>${hope_salary}</td>
    
            <td>${salary}</td>
    
            <td>${province + city + area}</td>
    
            <td data-id="${id}">
              <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
    
              <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
    
            </td>
    
          </tr>
    
        `
    }).join('')

    document.querySelector('.list').innerHTML = html

    document.querySelector('.total').innerText = res.data.length

}


// 2. 渲染省数据
const provinceBox = document.querySelector('[name="province"]')
async function renderProvice() {
    let list = await getProvinceList()
    let options = '<option value="">--省份--</option>'
    list.forEach(provName => {
        options += `
            <option value="${provName}">${provName}</option>
        `
    })
    provinceBox.innerHTML = options
}

// 3. 渲染市数据
const cityBox = document.querySelector('[name="city"]')
async function renderCity(pname) {
    let list = await getCityList(pname)
    let options = '<option value="">--城市--</option>'
    list.forEach(name => {
        options += `
            <option value="${name}">${name}</option>
        `
    })
    cityBox.innerHTML = options
}

// 4. 渲染区数据
const areaBox = document.querySelector('[name="area"]')
async function renderAear(pname, cname) {
    let list = await getAreaList(pname, cname)
    let options = '<option value="">--地区--</option>'
    list.forEach(name => {
        options += `
            <option value="${name}">${name}</option>
        `
    })
    areaBox.innerHTML = options
}

// ======事件监听
function registerProvinceClick() {
    provinceBox.addEventListener('change', function (e) {
        let pname = e.target.value
        renderCity(pname)
    })
}

function registerCityClick() {
    cityBox.addEventListener('change', function (e) {
        let cname = e.target.value
        renderAear(provinceBox.value, cname)
    })
}


const tbody = document.querySelector('tbody')
function registerTBodyList() {
    tbody.addEventListener('click', function (e) {
        console.log(e.target);

        if (e.target.classList.contains('bi-pen')) {
            pxmu.toast('修改')
        }

        if (e.target.classList.contains('bi-trash')) {
            pxmu.toast('删除')
        }
    })
}


// 确认按钮事件
const submitBox = document.querySelector('#submit')
const formBox = document.querySelector('#form')

function submitClick() {
    submitBox.addEventListener('click', async function (e) {
        e.preventDefault()
        // alert(provinceBox.value + cityBox.value + areaBox.value)
        const body = serialize(formBox, { hash: true, empty: true })
        // pxmu.success(JSON.stringify(body))

    })
}

// ===页面加载后执行===
renderStudentsList()
renderProvice()
registerProvinceClick()
registerCityClick()
submitClick()
registerTBodyList()

// 显示弹框
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)

document.querySelector('#openModal').addEventListener('click', () => {
    formBox.reset()
    modal.show()
})